<template>
  <div>
    <!-- <van-tabbar v-model="active" :safe-area-inset-bottom="true"  active-color="red" route>
      <van-tabbar-item name="home" to="/home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item name="categories" to="/categories" icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item name="search" to="/search" icon="search">搜索</van-tabbar-item>
      <van-tabbar-item name="cart" to="/cart" :info="total" icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item name="myinfo" to="/myinfo" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>-->
    <van-tabbar v-model="class_name" active-color="red" route>
      <van-tabbar-item  :name="item.class_name" :info="item.uname === '购物车' ? total : '' " v-for="(item,index) in footList" :key="index"  :to="item.dress" >
        <span>{{item.uname}}</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? item.active : item.inactive"
        />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      class_name: 'home',
      total: 0,
      footList: [
        {
          uname: '首页',
          dress: '/home',
          class_name: 'home',
          active: '/icons/home-active.png',
          inactive: '/icons/home.png'
        },
        {
          uname: '分类',
          dress: '/categories',
          class_name: 'categories',
          active: '/icons/cates-active.png',
          inactive: '/icons/cates.png'
        },
        {
          uname: '搜索',
          dress: '/search',
          class_name: 'search',
          active: '/icons/search-active.png',
          inactive: '/icons/search.png'
        },
        {
          uname: '购物车',
          dress: '/cart',
          class_name: 'cart',
          active: '/icons/cart-active.png',
          inactive: '/icons/cart.png'
        },
        {
          uname: '我的',
          dress: '/myinfo',
          class_name: 'myinfo',
          active: '/icons/my-active.png',
          inactive: '/icons/my.png'
        }
      ]
    }
  },
  created() {
    this.goodsTotal()
  },
  methods: {
    //计算商品总数
    goodsTotal() {
      if (localStorage.getItem('goodsIncate') === null) {
        this.total = 0
      } else {
        const savedGoods = JSON.parse(localStorage.getItem('goodsIncate'))
        let n = 0
        savedGoods.forEach(item => (n += item.goods_amount))
        this.total = n
      }
    }
  }
}
</script>

<style>
</style>